import React, { useState, useEffect } from "react"
import  './planListManage.less'
import { observer } from 'mobx-react-lite'
import { inteplanListItem, inteplanListAllList,inteplanListQuery } from "@/utils/interface"
import useStore from "@/context/useStore"
import { Table, Button, Input, Tabs, Spin } from 'antd';
import { SearchOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons'
const PlanList: React.FC = () => {

    let columns = [
        {
            title: '班级/计划',
            render: (row: inteplanListAllList) =>
                <div className='title_jihua'>
                    <span style={{ fontSize: '14px' }}>{row.className}</span><br />
                    <span style={{ fontSize: '16px' }}>{row.planname}</span>
                </div>
        }, {
            title: '时间',
            render: (row: inteplanListAllList) =>
                <div className='title_time'>
                    <span style={{ fontSize: '12px', fontWeight: 400, color: '#b2b7c6' }}>距结束还剩:&nbsp;&nbsp;</span>
                    <span style={{ fontSize: '18px', fontWeight: 500, color: '#303849' }}>{row.surplusTime.substr(0, 1) == '-' ? '0时0分0秒' : row.surplusTime}</span><br />
                    <span style={{ fontSize: '12px', fontWeight: 400, color: '#b2b7c6' }}>开始:&nbsp;&nbsp;</span>
                    <span style={{ fontSize: '12px', fontWeight: 400, color: '#6b6b80' }}>{row.begintime}</span><br />
                    <span style={{ fontSize: '12px', fontWeight: 400, color: '#b2b7c6' }}>结束:&nbsp;&nbsp;</span>
                    <span style={{ fontSize: '12px', fontWeight: 400, color: '#6b6b80' }}>{row.endtime}</span><br />
                </div>
        }, {
            title: '进度',
            render: (row: inteplanListAllList) =>
                <div className='title_jindu'>
                    <span style={{ fontSize: '24px', fontWeight: 500}} 
                    className={row.progress == '0' ? 'avtive':'span'}
                    >{row.progress}%</span>
                </div>
        }, {
            title: '操作',
            render: (row: inteplanListAllList) =>
                <div className='title_caozuo'>
                    <EyeOutlined style={{ fontSize: '18px', padding: '0px 10px', color: '#679cf6' }} />
                </div>
        },
    ];
    
    let arr = ['未开始','进行中','已结束']
    const [carIndex, setcarIndex] = useState(0) //tab  下标
    let { planListSkill } = useStore()
 
    useEffect(() => {
        let queryManage:inteplanListQuery = {
            classId:'', searchName:'', ifFinished: 1,
            pageNum: 1, pageSize: 10,
        }
        planListSkill.planListManage(queryManage)
    }, [])

    useEffect(() => {
        planListSkill.planListManageNull()
        let queryManage:inteplanListQuery = {
            classId:'', searchName:'', ifFinished: 1,
            pageNum: 1, pageSize: 10,
        }
        queryManage = {...queryManage,ifFinished:carIndex}
        planListSkill.planListManage(queryManage)
    }, [carIndex])
    return (
        <div className='planlistmanage'>
            <div className='totaltitle'>
                <div className='title_son'>
                    <span>计划</span>&nbsp;&nbsp;/&nbsp;&nbsp; <span>计划管理</span>
                </div>
            </div>
            <div className='subtitle'>
                <div className='title_type2'>
                    <div className='table_item'>
                        <div className='div_span'>
                            {
                                arr.map((item,index)=>{
                                    return <span key={index} onClick={() => setcarIndex(index)}
                                    className={carIndex==index?`actives${index}`:`spans${index}`} >{item}</span>
                                })
                            }
                        </div>
                    </div>
                    <div className='table_list'>
                        {
                            planListSkill.planlistManage.length == 0 ? 
                            <div className="example"><Spin /> <Spin /> <Spin /> </div>:
                            <Table rowKey='id' className='tables' columns={columns} 
                            dataSource={planListSkill.planlistManage} size="middle" />
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}

export default observer(PlanList)